<script>
export default {
    data() {
        return {
            currDate:new Date()
        }
    },
    methods: {
        changeDate(e){
				console.log('当前选中的日期：' + e)
		},
        changeDate2(e) { 
            console.log('当前选中的日期：' + e)
        },
        changeDate3(e) { 
            console.log('当前选中的日期：' + e)
        },
        changeDate4(e) { 
            console.log('当前选中的日期：' + e)
        },
    },
}
</script>

<route lang="json">{
    "style": {
        "navigationBarTitleText": "WeekCalendar"
    }
}</route>
<template>
    <view class="main">
        <view>
            <eui-week-calendar :value="currDate" @change="changeDate" />
        </view>
        <view style="margin-top: 50px;">
            <eui-week-calendar :value="currDate" @change="changeDate2" themeColor="rgb(2, 183, 230)" selectBg="linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)" selectShadow="0rpx 0rpx 20rpx 0rpx rgba(2,183,230,0.2)" />
        </view>
        <view style="margin-top: 50px;">
            <eui-week-calendar :value="currDate" @change="changeDate3"  themeColor="rgba(255, 100, 48, 1)" selectBg="linear-gradient( 135deg, #FF8359 0%, #FF6430 100%)" selectShadow="0rpx 0rpx 20rpx 0rpx rgba(255,100,48,0.2)" />
        </view>
        <view style="margin-top: 50px;">
            <eui-week-calendar :value="currDate" @change="changeDate4" themeColor="rgb(2, 183, 230)"  leftIcon="left" rightIcon="right" selectBg="linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)" selectShadow="0rpx 0rpx 20rpx 0rpx rgba(2,183,230,0.2)"/>
        </view>
    </view>
    
</template>

<style lang="scss">
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
</style>
